<template>
  <div class="info">
    <van-field v-model="text" label="用户名" placeholder="请输入用餐时对您的称呼"/>
    <van-field name="radio" label="性别">
      <template #input>
        <van-radio-group v-model="radio" direction="horizontal">
          <van-radio name="1">先生</van-radio>
          <van-radio name="2">女士</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <van-field v-model="tel" type="tel" label="手机号" placeholder="请输入手机号"/>
    <van-field v-model="adress" type="adress" label="地址" placeholder="请输入您的地址"/>
    <van-field
      v-model="men"
      type="men"
      label="门牌号"
      placeholder="如：5号楼28室"
    />
    <van-field name="radio2" label="标签">
      <template #input>
        <van-radio-group v-model="radio2" direction="horizontal">
          <van-radio name="1">公司</van-radio>
          <van-radio name="2">家</van-radio>
          <van-radio name="3">学校</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <van-cell-group>
      <van-switch-cell v-model="checked" title="默认地址" />
    </van-cell-group>
    <div class="btn">
      <van-button round type="info" color="#6d87c4" class="btn2" @click="jump"
        >保存</van-button
      >
    </div>
    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '30%' }"
    >
      <div class="discounts">
        <van-nav-bar title="提示" />
        <p class="search">删除后无法恢复，是否确定删除？</p>
        <div class="btn_b">
          <van-button
            round
            type="info"
            size="large"
            color="#6d87c4"
            @click="ascertain"
            >确定</van-button
          ><span class="k"></span>
          <van-button
            round
            type="info"
            size="large"
            color="#6d87c4"
            @click="cancel"
            >取消</van-button
          >
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Vue from "vue";
import { Field } from "vant";
import { SwitchCell } from "vant";
import axios from "axios"

Vue.use(SwitchCell);
Vue.use(Field);

export default {
  components: {},
  methods: {
    del() {
      this.show = true;
    },
    cancel() {
      this.show = false;
    },
    ascertain() {
      this.show = false;
      this.$router.push("/address");
    },
    
    jump() {
      this.$router.push("/Waisong");
        
      axios({
        url:'/apf/addr/addAddr',
        method:"POST",
        data:{
          defaultAddr: 2,
          detailAddr: this.adress,
          houseNumber: this.men,
          id: 12,
          label: this.radio2,
          sex: this.radio,
          tel: this.tel,
          userId: 4,
          userName: this.text
        }
      })
      // let username = this.text;
      // let radio = this.radio;
      // let tel = this.tel;
      // let adress = this.adress;
      // let men = this.men;
      // let radio2 = this.radio2;
      // let id = this.shu
      // console.log(username, radio, tel, adress, men, radio2,id);
    },
  },
  data() {
    return {
      tel: "",
      text: "",
      radio: "1",
      adress: "",
      men: "",
      radio2: "1",
      checked: false,
      show: false,
    };
  },
};
</script>

<style scoped>
.info {
  width: 90%;
  margin: 0 auto;
}
.btn {
  display: flex;
  justify-content: space-around;
  margin-top: 2.4rem;
}
.btn2 {
  width: 3.32rem;
}
.btn1 span {
  color: #000;
}
/deep/.van-field__left-icon .van-icon,
.van-field__right-icon {
  display: none;
}
.search {
  width: 80%;
  margin: 0.4rem auto;
}
.btn_b {
  display: flex;
  justify-content: space-around;
  width: 80%;
  margin: -0.1rem auto;
  opacity: 0.6;
}
.k {
  width: 0.5rem;
  display: inline-block;
}
</style>